<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="filter_area">
        <el-input
          size="medium"
          v-model="params.order_no"
          class="serach_input mr_15 mt_15"
          placeholder="订单编号"
        ></el-input>

        <el-select v-model="params.status" size="medium" placeholder="请选择" class="mr_15 mt_15">
          <el-option
            v-for="item in statuslist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button size="medium" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table
        @selection-change="SelectHadnle"
        :expand-row-keys="keys"
        row-key="id"
        :data="list"
        element-loading-text
        fit
        highlight-current-row
        class="main-loading"
      >
        <el-table-column width="250px" prop="order_no" label="订单编号"></el-table-column>
        <el-table-column width="200" prop="name" label="商品">
          <template slot-scope="scope">
            <div class="pro">
              <div class="img">
                <vimage style="width: 40px; height: 40px;" :src="scope.row.master" fit="fit"></vimage>
              </div>
              <div class="txt">
                <div class="name username" :title="scope.row.name">{{ scope.row.name }}</div>
                <div class="class">{{ scope.row.pvs_value_new }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="购买用户">
          <template slot-scope="scope">
            <span class="username">{{ scope.row.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="是否内购">
          <template slot-scope="scope">
            <span class="username" v-if="scope.row.is_purchase==1">是</span>
            <span class="username" v-if="scope.row.is_purchase==2">否</span>
          </template>
        </el-table-column>
        <el-table-column label="一级分销" v-if="agent_rank>0">
          <template slot-scope="scope">
            <div  v-if="scope.row.name1" class="text_bg" :title="'名称：' + scope.row.name1">
              <span>名称：{{ scope.row.name1 || '无' }}</span>
              <span>佣金：{{ scope.row.amount1 || '无' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="二级分销" v-if="agent_rank>1">
          <template slot-scope="scope">
            <div v-if="scope.row.name2" class="text_bg" :title="'名称：' + scope.row.name2">
              <span>名称：{{ scope.row.name2 || '无' }}</span>
              <span>佣金：{{ scope.row.amount2 || '无' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="三级分销" v-if="agent_rank>2">
          <template slot-scope="scope">
            <div v-if="scope.row.name3" class="text_bg" :title="'名称：' + scope.row.name3">
              <span>名称：{{ scope.row.name3 || '无' }}</span>
              <span>佣金：{{ scope.row.amount3 || '无' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="200" prop="update_time" label="订单完成时间"></el-table-column>
        <el-table-column width="100" prop="status" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.status | getstatus }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer">
        <el-pagination
          @current-change="ChangeCurrent"
          class="pages"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="size"
          :page-count="page"
          hide-on-single-page
        ></el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import { agent_orderlist } from "@/api/mall/agent";
import DatePicker from "@/components/DatePicker/index";
import { fitter_keyword } from "@/utils/index";
import {mapGetters} from 'vuex';
export default {
  data() {
    return {
      params: {
        order_no: "",
        status: -1
      },
      statuslist: [
        {
          value: -1,
          label: "全部"
        },
        {
          value: 0,
          label: "未结算"
        },
        {
          value: 1,
          label: "已结算"
        },
        {
          value: 3,
          label: "已退款"
        }
      ],
      keys: [],
      paramsdf: {},
      page: 1,
      size: 10,
      total: 0,
      listLoading: true,
      list: [],
      drawer: false,
      direction: "rtl",
      id: "",
      type: "add",
      selectionData: [],
      show_commission: false,
      agent_id: -1
    };
  },
  components: {
    DatePicker
  },
  filters: {
    getstatus: function(value) {
      switch (value) {
        case 0:
          return "未结算";
          break;
        case 1:
          return "已结算";
          break;
        case 2:
          return "已取消";
          break;
        case 3:
          return "已退款";
          break;
        default:
          return "-";
          break;
      }
    }
  },
  created() {
    if (this.$route.query && this.$route.query.order_no) {
      this.params.order_no = this.$route.query.order_no;
    }
    this.getlist();
  },
  computed: {
    ...mapGetters(["agent_rank"])
  },
  methods: {
    search() {
      this.paramsdf = fitter_keyword(this.params);
      this.getlist();
    },
    //编辑
    EditHandle(id) {
      this.id = id;
      this.type = "edit";
      this.drawer = true;
    },
    //编辑完成
    beClose() {
      (this.drawer = false), this.getlist();
    },
    //获取列表
    getlist() {
      this.listLoading = true;
      var data = this.params;
      data.page = this.page;
      data.size = this.size;
      agent_orderlist(data).then(res => {
        var jsondata = res.msg;
        this.list = jsondata.data;
        this.total = jsondata.total;
        this.listLoading = false;
      });
    },
    //获取时间
    gettime(value) {
      this.params.begin_date = value[0];
      this.params.end_date = value[1];
    },
    //切换页码
    ChangeCurrent(page) {
      this.page = page;
      this.getlist();
    },
    SelectHadnle() {}
  }
};
</script>
<style>
.fixed_header {
  height: 64px;
  background: #edf0f3 !important;
}
.fixed_header th {
  background: #edf0f3 !important;
}
</style>
<style lang="scss" scoped>
.cardlist {
  display: flex;
  .box-card {
    flex: 1;
    margin: 0 20px;
    .card_item {
      div {
        margin: 10px 0;
      }
    }
  }
}
.pro {
  display: flex;

  .img {
    width: 40px;
    margin-right: 10px;
    height: 40px;
  }

  .txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: space-between;

    .name {
      .t0 {
        color: #409eff;
        font-weight: 700;
        margin-right: 5px;
      }

      .t1 {
        color: #f56c6c;
        font-weight: 700;
        margin-right: 5px;
      }
    }
  }
}
.username {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
}
.text_bg {
  // height: 40px;
  // background: #edf0f3;
  border-radius: 10px;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  cursor: pointer;
  span:first-child {
    display: block;
    margin-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
  }
}
</style>
